<template>
	<view>
		<!-- 二手搜索 -->
		<view class="search" :style="{paddingTop:capsuleTop+'px',height:capsuleHeight+'px'}">
			<view @click="returnHandle" class="return">
				<i class="iconfont icon-fanhuitubiao" :style="{color:'#666666',fontWeight:'bold'}"></i>
			</view>
			<view class="searchBox">
				<van-icon name="search" color="#AEAEAE" class="serchIcon" />
				<input  type="text" class="searchInput" v-model="inputkeyword" @input="searchChangeHandel"
					:placeholder="placeholder" />
			</view>
		</view>
		<!-- tabs切换 -->
		<community-nav-list :navList="usedTabText" :widths='"100%"' :active="active" @clickIndex="getClickIndexHandle"></community-nav-list>
		<!-- 最新 -->
		<scroll-view class="content" v-show="active===0" :style="{height:contentHeight + 'px'}">
			<waterfallsflow :wfList="newestArray" @itemTap="itemTap"></waterfallsflow>
		</scroll-view>
		<!-- 最热 -->
		<scroll-view class="content" v-show="active===1" :style="{height:contentHeight + 'px'}">
			<waterfallsflow :wfList="hottestArray" @itemTap="itemTap"></waterfallsflow>
		</scroll-view>
		<!-- 价格 -->
		<scroll-view class="content" v-show="active===2" :style="{height:contentHeight + 'px'}">
			<waterfallsflow :wfList="priceArray" @itemTap="itemTap"></waterfallsflow>
		</scroll-view>
	</view>
</template>

<script>
	import {
		capsuleTopHeight
	} from "../../mixins/mixins.js"
	export default {
		mixins: [capsuleTopHeight],
		props: {
			usedName: {
				type: String
			}
		},
		data() {
			return {
				inputkeyword:'',//搜索关键词
				placeholder: '请搜索商品',//placeholder的值
				active:0,//当前选中项
				//分类数据
				usedTabText: [{
						familyId: '0',
						familyName: '最新',
						image:''
					},
					{
						familyId: '1',
						familyName: '最热',
						image:''
					},
					{
						familyId: '2',
						familyName: '价格',
						image: '../../static/icon-top.png'
					}
				],
				contentHeight:0,//滚动内容高度
				newestArray: [],//最新数据
				// 最新分页
				newestQueryObj: {
					pagenum: 1,
					totalPageNumber: 1,
					pagesize: 0, 
					total: 1,
				},
				hottestArray: [],//最热数据
				//最热分页
				hottestQueryObj: {
					pagenum: 1,
					totalPageNumber: 1,
					pagesize: 0,
					total: 1,
				},
				
				priceArray: [],//价格数据
				//价格分页
				priceQueryObj: {
					pagenum: 1,
					totalPageNumber: 1,
					pagesize: 0,
					total: 1,
				},
				
				requestState: false,// 请求状态
				pagingState:false,//分页请求状态
				pullDownState:false,//当前刷新
				
				isPriceStatus: true,//价格点击状态	
			};
		},
		created() {
			this.screenHeight(); //获取屏幕高度
			
			if(this.$props.usedName===''){
				console.log('分类为false');
				if (this.inputkeyword === '') {
					//默认展示状态
					this.getUsedNewest()//最新方法
					this.getUsedHottest()//最热方法
					this.getPrice()//价格方法
				}else{
					// 搜索
					console.log('用户进行了搜索')
				}
			}else{
				console.log('分类为true')
			}
			
			
		},
		methods: {
			// 商品文章跳转
			itemTap(item) {
				uni.navigateTo({
					url: `../../subpkg/product-details/product-details?id=${item.intactGoodsId}`
				})
			},
			// 屏幕高度
			screenHeight() {
				const wxWindowHeight = uni.getSystemInfoSync().windowHeight;
				this.contentHeight =
				wxWindowHeight - this.capsuleHeight - this.capsuleTop - 90;
			},
			// 最新
			async getUsedNewest(timeOutState = true) {
				this.requestState = true
				const {
					data: res
				} = await uni.$http.get(`/ym_server/IntactGoods/1?page=${this.newestQueryObj.pagenum}`)
				if (res.code === 200 && res.data.list.records) {
					setTimeout(()=>{
						this.newestQueryObj.totalPageNumber = res.data.list.pages;
						this.newestQueryObj.pagesize = res.data.list.pageSize;
						this.newestQueryObj.total = res.data.list.total;
						this.newestArray = [...this.newestArray, ...res.data.list.records || []];
					},500)
					
				} else {
					this.newestArray = []
					this.newestQueryObj.totalPageNumber = 0
					this.newestQueryObj.pagesize = 0
					this.newestQueryObj.total = 0
				}
				if(timeOutState){
					setTimeout(()=>{
						this.requestState = false
						this.pullDownState=false
					},500);
				}else{
					this.pullDownState=false
					this.requestState = false
				}
			},
			// 最热
			async getUsedHottest(timeOutState = true) {
				this.requestState = true
				const {
					data: res
				} = await uni.$http.get(`/ym_server/IntactGoods/2?page=${this.hottestQueryObj.pagenum}`)
				if (res.code === 200 && res.data.list.records) {
					setTimeout(()=>{
						this.hottestQueryObj.totalPageNumber = res.data.list.pages;
						this.hottestQueryObj.pagesize = res.data.list.pageSize;
						this.hottestQueryObj.total = res.data.list.total;
						this.hottestArray = [...this.hottestArray, ...res.data.list.records || []];
					},500)
				} else {
					this.hottestArray = []
					this.hottestQueryObj.totalPageNumber = 0
					this.hottestQueryObj.pagesize = 0
					this.hottestQueryObj.total = 0
				}
				if(timeOutState){
					setTimeout(()=>{
						this.pullDownState=false
						this.requestState = false
					},500);
				}else{
					this.pullDownState=false
					this.requestState = false
				}
			},
			// 价格
			async getPrice(timeOutState = true) {
				this.requestState = true
				const {
					data: res
				} = await uni.$http.get(`/ym_server/IntactGoods/2?page=${this.hottestQueryObj.pagenum}`)
				if (res.code === 200 && res.data.list.records) {
					setTimeout(()=>{
						this.hottestQueryObj.totalPageNumber = res.data.list.pages;
						this.hottestQueryObj.pagesize = res.data.list.pageSize;
						this.hottestQueryObj.total = res.data.list.total;
						this.hottestArray = [...this.hottestArray, ...res.data.list.records || []];
					},500)
				} else {
					this.hottestArray = []
					this.hottestQueryObj.totalPageNumber = 0
					this.hottestQueryObj.pagesize = 0
					this.hottestQueryObj.total = 0
				}
				if(timeOutState){
					setTimeout(()=>{
						this.pullDownState=false
						this.requestState = false
					},500);
				}else{
					this.pullDownState=false
					this.requestState = false
				}
			},
			
			// 搜索
			searchChangeHandel(event) {
				clearTimeout(this.time)
				this.time = setTimeout(() => {
					if (event.detail.value.trim() == "" && event.detail.value.length != 0) return Dialog.alert({
						message: '请输入搜索内容',
					})
					this.$emit("searchResult", event.detail.value.trim())
				}, 300)
			},
			//tabs切换
			getClickIndexHandle(id,index){
				if(index === this.active && this.active===0){
					this.pullDownState = true
					this.requestState=true
					this.pagingState=false
					this.newestArray=[]
					this.newestQueryObj.pagenum=1
					this.newestQueryObj.totalPageNumber=0
					this.newestQueryObj.pagesize=0
					this.newestQueryObj.total=0
					this.getUsedNewest()
				}else if(index === this.active && this.active===1){
					this.pullDownState = true
					this.requestState=true
					this.pagingState=false
					this.hottestArray=[]
					this.hottestQueryObj.pagenum=1
					this.hottestQueryObj.totalPageNumber=0
					this.hottestQueryObj.pagesize=0
					this.hottestQueryObj.total=0
					this.getUsedHottestt()	
				}
				this.active = index
			},
			
		}
	}
</script>

<style lang="scss">
	// 搜索
	.search {
		width: 520upx;
		display: flex;
		margin-left: 40upx;
	
		.return {
			display: flex;
			justify-content: center;
			align-items: center;
			padding-right: 20upx;
	
			image {
				height: 32upx;
			}
		}
	
		.searchBox {
			width: 90%;
			border-radius: 999upx;
			display: flex;
			background: white;
			align-items: center;
	
			.serchIcon {
				margin-left: 18upx;
				margin-right: 10upx;
				font-size: 36upx;
			}
	
			.searchInput {
				width: 80%;
				color: #AEAEAE;
				height: 100%;
				font-size: 28upx;
	
			}
		}
	}
	
	html {
		background: #FFFFFF;
	}

	.searchBox {
		border: 4rpx solid #3FD3D1 !important;
	}

	.bottomShow {
		text-align: center;
		font-size: 22upx;
		color: #AEAEAE;
		margin-bottom: 40upx;
	}
</style>
